<!DOCTYPE html>
<html>

<head>
  <title>Demo | Leafer UI</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <script src="./js/leafer-ui.js"></script>
</head>

<body></body>

<script>
  const lf = LeaferUI;
  const app = new lf.Leafer({ view: window })

  const rect = new lf.Rect({
    x: 200,
    y: 200,
    width: 200,
    height: 200,
    fill: '#32cd79',
    draggable: true,
  })

  const star = new lf.Star({
    x: 500,
    y: 500,
    width: 100,
    height: 100,
    points: 3,
    innerRadius: 0.15,
    fill: 'rgb(50,205,121)'
  })

  const path = new lf.Path({
    fill: 'rgb(50,205,121)',
    path: 'M 0 50 L 100 100 L 0 100 X 0 0 200 200 30',
    windingRule: 'evenodd'
  })

  const canvas = new lf.Canvas({ width: 800, height: 600 })
  const { context } = canvas

  context.fillStyle = '#FF4B4B'
  context.beginPath()
  context.roundRect(0, 0, 100, 100, 30)
  context.arc(50, 50, 25, 0, Math.PI * 2)
  context.fill('evenodd')

  context.fillStyle = '#FEB027'
  context.beginPath()
  context.arc(50, 50, 20, 0, Math.PI * 2)
  context.fill()

  canvas.paint() // 更新渲染


  app.add(rect)
  app.add(star)
  // app.add(path)
  app.add(canvas)
</script>

</html>